<template>
	<wsPage title="标签列表">
		<div slot="page_operate">
			<Button  @click="refreshPage"><Icon type="refresh"></Icon><span>刷新</span></Button>
		</div>
		<wsSmPanel :page="table.page" @simple-query="query" @page-change="query">
			<div slot="query_form">
				<Form :model="queryForm" :label-width="100" inline>
					<FormItem label="标签名">
			            <Input v-model="queryForm.tagsName" placeholder="请输入"></Input>
			        </FormItem>
			        <FormItem label="标签类型" prop="tagsType">
			            <Select clearable v-model="queryForm.tagsType" class="ws-form-select">
					        <Option value="1">商城</Option>
					        <Option value="2">文章</Option>
					        <Option value="3">房间</Option>
					    </Select>
			        </FormItem>
				</Form>
			</div>
			<div slot="list_operate">
				<Button  @click="showAddModal">新增标签</Button>
			</div>
			<div slot="list_data">
				<Table border :columns="table.columns" :data="table.data" @on-selection-change="tableSelected"></Table>
			</div>
		</wsSmPanel>
		
		<!--新增账号弹框-->
		<wsModal v-model="tagModal.show" ok-text="保存" title="创建敏感词" @on-ok="saveModal" @on-cancel="cancelModal">
		    <Form ref="tagForm" :model="tagModal.form" :rules="tagModal.validate" :label-width="100">

		    	<FormItem label="标签类型" prop="tagsType">
		            <Select v-model="tagModal.form.tagsType">
				        <Option value="1">商城</Option>
				        <Option value="2">文章</Option>
				        <Option value="3">房间</Option>
				    </Select>
		        </FormItem>

		        <FormItem label="标签名" prop="tagsName">
		            <Input v-model="tagModal.form.tagsName"></Input>
		        </FormItem>

		        <!-- <FormItem label="排序" prop="orderNum">
		            <InputNumber :max="100" :min="1" v-model="tagModal.form.orderNum" style="width: 100%;"></InputNumber>
		        </FormItem> -->

		        <FormItem label="备注" prop="memo">
		            <Input v-model="tagModal.form.memo" autofocus></Input>
		        </FormItem>
		        

		    </Form>			
		</wsModal>	
	</wsPage>
</template>

<script>
	import Util from '../../../common/util.js';
	export default {
		data() {
			return {
				queryForm: {
					tagsName: '',
					tagsType:null
				},
				table: {
					columns: [{
						title: '标签名',
                        key: 'tagsName',
                        width: 300,
                        align: 'center'
					},{
						title: '标签类型',
                        key: 'tagsType',
                        align: 'center',
                        render: (h, params) => {
                        	let tagsTypeName = '';
                        	let tagsTypeColor = '';
                        	if (params.row.tagsType == 1) {
                        		tagsTypeName = '商城';
                        		tagsTypeColor = "red";
                        	}else if(params.row.tagsType == 2){
                        		tagsTypeName = '文章';
                        		tagsTypeColor = "green";
                        	}else{
                        		tagsTypeName = '房间';
                        		tagsTypeColor = "yellow";
                        	}
                            return h('div', [
                                h('Tag', {
                                    props: {
                                        closable: false,
                                        color: tagsTypeColor,
                                        type:'border'
                                    }
                                },tagsTypeName),
                            ]);
                        }
					},/*{
						title: '排序',
                        key: 'orderNum',
                        align: 'center'
					},*/{
						title: '备注',
                        key: 'memo',
                        align: 'center'
					},{
						title: '创建时间',
                        key: 'createDate',
                        align: 'center'
					},{
						title: '操作',
						width: 180,
						fixed: 'right',
						align: 'center',
						render: (h, params) => {
							return h('div', [
								h('Button', {
									props: {
	                                    type: 'text',
	                                    size: 'small'
	                                },
									on: {
										click: () => {
											let rowId = params.row.id;
                                    		this.showEditModal(rowId);
										}
									}
								}, '编辑')
								])
						}
					}],
					data: [],
					page: {
						total: 0, //总条数
						pageNum: 1, //当前页
						pageSize: 10 //每页显示条数
					},
					selection: [], //选中
					loading: true
				},
				//新增弹框
				tagModal: {
					show: false,
					form: {
						id:'',
						tagsName: '',
						tagsType: '',
						// orderNum: 0,
						memo:''						
					},
					validate: {
						tagsName: [
	                        { required: true, message: '标签名不能为空', trigger: 'blur' }
	                    ],
	                    tagsType: [
	                        { required: true, message: '请选择标签类型', trigger: 'blur' }
	                    ]
					}
				}
			}
		},
		computed: {
			/**
			 * 表格行是否为选中状态
			 */
			isTableSelected() {
				return this.table.selection.length > 0;
			},
			isEdit() {
		      return !Util.vad.isBlank(this.tagModal.form.id);
		    }	
		},
		mounted() {
			this.init();
		},
		methods: {
			refreshPage(){
				this.queryForm.tagsName = '';
				this.queryForm.tagsType = null;
				this.table.page.pageNum = 1;
				this.query();
			},
			init() {
				this.query();
			},
			/**
			 * 表单查询
			 */
			query() {
				let pageSize = this.table.page.pageSize;
				let pageNum = this.table.page.pageNum;
				const _this = this;
				this.axios.post('/ws/ops/tagss?pageNum=' + pageNum + '&pageSize=' + pageSize, this.queryForm).then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if (0 == resMeta.code) {
						_this.buildPageData(res.data);
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});
			},
			/**
			 * 构建表格数据
			 */
			buildPageData(data_) {
				this.table.data = data_.list;
				this.table.page.total = data_.total;
			},
			/**
			 * 打开新增模态框
			 */
			showAddModal(){
				this.initTagsData('','','',0,'');
				this.tagModal.show = true;
			},
			/**
			 * 打开编辑模态框
			 */
			showEditModal(rowId){
				this.queryById(rowId);
			},
			/**
			 * 根据id查询
			 */
			queryById(rowId){
				const _this = this;
				this.axios.get('/ws/ops/tagss/' + rowId).then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if (0 == resMeta.code) {
						_this.initTagsData(res.data);
						_this.tagModal.show = true;
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});
			},
			//初始化标签数据	
			initTagsData(data){
				this.tagModal.form.id = data.id;
				this.tagModal.form.tagsName = data.tagsName;
				this.tagModal.form.tagsType = data.tagsType;
				// this.tagModal.form.orderNum = data.orderNum;
				this.tagModal.form.memo = data.memo;
			},
			/**
			 * 编辑
			 */
			editTags(){
				const _this = this;
				let postData_ = this.tagModal.form;
				this.axios.put('/ws/ops/tagss', postData_).then(function(response) {
					let res = response.data;
					if(0 === res.meta.code) {
						_this.$Message.success('修改成功!');
                        _this.tagModal.show = false;
						_this.query();
					} else {
						let message_ = res.meta.message;
						_this.$Message.warning('修改失败:' + message_);
					}
				});
			},
			/**
			 * 新增
			 */
			saveTags(){
				const _this = this;
				let postData_ = this.tagModal.form;
				this.axios.post('/ws/ops/tags', postData_).then(function(response) {
					let res = response.data;
					if(0 === res.meta.code) {
						_this.$Message.success('新增成功!');
                        _this.tagModal.show = false;
						_this.query();
					} else {
						let message_ = res.meta.message;
						_this.$Message.warning('新增失败:' + message_);
					}
				});
			},
			/**
			 * 保存操作
			 */
			 submitModal(){
			 	if(this.isEdit) {
					this.editTags();
				} else {
					this.saveTags();
				}
			 },
			/**
			 * 新增弹框确认操作
			 */
			saveModal() {
				this.$refs['tagForm'].validate((valid) => {
					if (valid) {
						this.submitModal();
                    } else {
                        this.$Message.error('表单验证失败!');
                    }
                    
               });
			},
			
			/**
			 * 新增的弹框取消操作
			 */
			cancelModal() {
				this.$refs['tagForm'].resetFields();
				this.tagModal.show = false;
			},
			/**
			 * 表格选择变更事件
			 */
			tableSelected(selection_) {
				this.table.selection = selection_;
			},
		
		}
	}
</script>

<style scoped>
	.ws-form-select {
		width: 162px;
	}
</style>